<template>
    <div class="process-panel">
        <div class="type-bar">
            <ul style="border: 1px solid darkgray">
                <li class="tt-header" style="border-right: 1px solid darkgray">
                    <div style="margin: 10px">
                        流程类别：
                    </div>
                </li>
                <li>
                    <el-scrollbar style="width: 1000px;float: left;height: 60px;">
                        <div class="scrollbar-flex-content">
                            <div v-for="(item,index) in proTypeData" :key="item"
                               :class="{'active-type':activeProType===index}"
                               class="scrollbar-item">
                                <span @click="activeProTypeChange(item,index)">{{ item.name }}</span>
                                <template v-if="item.id">
                                    <el-button type="text" :icon="EditPen" size="default" @click="editClassifyClick(item)" class="edit-classify"/>
<!--                                    <el-button type="text" :icon="Delete" size="default" @click="deleteClassifyClick(item)" class="delete-classify"/>-->
                                </template>
                            </div>
                        </div>
                    </el-scrollbar>
                </li>
                <li style="float: right">
                    <div class="type-operate">
                        <ul>
                            <li class="aaa">
                                <el-button type="primary" :icon="Plus" @click="addClassifyClick" plain>添加流程类别</el-button>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <process-table :classifyId="currentClassifyId"/>
        <process-classify-form width="32%" ref="classifyForm" @refresh-data="loadProcessClassify"/>
    </div>
</template>

<script>
    import {EditPen,Search,Refresh,RefreshRight,CollectionTag,Delete,Plus,Edit,DArrowRight,Picture,Failed,View,Upload,Download} from '@element-plus/icons-vue'
    import {deleteProClassify, getProClassify} from "../../../network/sys/processClassify";
    import ProcessTable from "./ProcessTable.vue";
    import ProcessClassifyForm from "./form/ProcessClassifyForm.vue";

    export default {
        name: "ProcessMain",
        components:{
            ProcessClassifyForm,
            ProcessTable,
        },
        setup(){
            return{
                Search,
                Refresh,
                RefreshRight,
                CollectionTag,
                Delete,
                Plus,
                Edit,
                DArrowRight,
                Picture,
                Failed,
                View,
                Download,
                Upload,
                EditPen
            }
        },
        data(){
            return{
                currentClassifyId: null,
                activeProType: 0,
                proTypeData: [],
            }
        },
        methods:{
            addClassifyClick(){
                let frm = this.$refs.classifyForm;
                frm.visible = true;
                frm.type = 0;
                frm.title = '添加流程类别';
            },
            deleteClassifyClick(obj){
                console.log('删除对象',obj)
                this.$operate.remove({
                    title: '删除流程类别',
                    data: `' 流程类别${obj.name} '`,
                    executeFn: ()=>{
                        deleteProClassify([obj.id]).then(vo=>{
                            this.$response.handle({
                                data: vo,
                                success: '删除成功',
                                error: '删除失败',
                                successFn: ()=>{
                                    this.loadProcessClassify();
                                }
                            })
                        })
                    }
                })
            },
            editClassifyClick(obj){
                // console.log('修改对象',obj)
                let frm = this.$refs.classifyForm;
                frm.visible = true;
                frm.type = 1;
                frm.title = '修改流程类别';
                this.$nextTick(function (){
                    frm.setClassify(obj)
                })
                // frm.classify = this.$utils.clone(obj);
            },
            //1.当前流程选项
            activeProTypeChange(item,index){
                this.activeProType = index;
                this.currentClassifyId = item.id;
            },
            /*2.数据加载项*/
            loadProcessClassify(){
                getProClassify().then(vo=>{
                    console.log('流程类别信息',vo);
                    this.proTypeData = [
                        {
                            id: null,
                            name: '全部流程'
                        },
                    ];
                    // this.proTypeData = vo.data;
                    vo.data.forEach(e=>{
                        this.proTypeData.push(e);
                    })
                })
            },
            init(){
                this.loadProcessClassify();
            }
        },
        created() {
            this.init();
        }
    }
</script>
<style scoped>
*{
    /*border: 1px solid red;*/
}
.process-panel{
    width: 100%;
    min-height: 99%;
    background: white;
}
.type-bar{
    background: white;
    width: 100%;
    height: 60px;
}
.type-bar ul{
    height: 60px;
}
.scrollbar-flex-content {
    display: flex;
}
.scrollbar-item {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 32px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    box-sizing: border-box;
    background: #d7cdcd;
    color: #666666;
    /*color: var(--el-color-danger);*/
    cursor: pointer;
    opacity: 0.6;
}
.active-type{
    box-shadow: 0 0 2px 1px yellow;
    opacity: 1;
}
/*.process-bar{*/
/*    width: 100%;*/
/*    min-height: 500px;*/
/*}*/
.type-operate{
    float: left;
}
.aaa{
    margin: 10px;
}
.tt-header{
    min-width: 110px;
    height: 100%;
}
.delete-classify,.edit-classify{
    margin-left: 5px;
    color: orange;
    height: 22px;
}
.edit-classify:hover,.delete-classify:hover{
    background: orangered;
}
</style>
